Skip to content

Fix homepage layout alignment and responsiveness#993

Open
Prakash1185 wants to merge 3 commits intoapache:masterfrom
Prakash1185:fix/fix-homepage-responsiveness
Open

Fix homepage layout alignment and responsiveness#993
Prakash1185 wants to merge 3 commits intoapache:masterfrom
Prakash1185:fix/fix-homepage-responsiveness

Conversation

@Prakash1185
Copy link

@Prakash1185 Prakash1185 commented Jan 26, 2026

Summary

  • This PR improves the overall responsiveness of the homepage
  • Improves the css in all the sections of the homepage

Problem

  • Herosection : Buttons overflow, no carousel in smaller screens , blank github and fork data.
  • Tasks : Non responsive title style, overflow of tasks item images.
  • Why DolphinScheduler : After 640px and below 1100px the cards were overlapping each other.
  • Features : Each features cards were not centre aligned on smaller screen.
  • Community : Blank github start and fork data , not centred , image was not visible on smaller screens.
  • Latest Post : Image not visible on smaller screens , overflow on tablet screen sizes.
  • Stay connect : Extra space in y direction
  • Footer : contact and email not visible on smaller screen sizes , not centred in smaller screens.

Changes Made

  • Fixed all the above problems with proper css , media queries with breakpoints.

📸 Screenshots ( Desktop , Mobile , Tablet )

Before vs After

Herosection

Before After
Screenshot 2026-01-26 223600 Screenshot 2026-01-26 223537
Screenshot 2026-01-26 223905 Screenshot 2026-01-26 223851
Screenshot 2026-01-26 224116 Screenshot 2026-01-26 224122

Tasks

Before After
Screenshot 2026-01-26 223613 Screenshot 2026-01-26 223627
Screenshot 2026-01-26 223915 Screenshot 2026-01-26 223920
Screenshot 2026-01-26 224128 Screenshot 2026-01-26 224134

Why DolphinScheduler

Before After
Screenshot 2026-01-26 223643 Screenshot 2026-01-26 223649
Screenshot 2026-01-26 223925 Screenshot 2026-01-26 223936
Screenshot 2026-01-26 224140 Screenshot 2026-01-26 224155

Features

Before After
Screenshot 2026-01-26 223701 Screenshot 2026-01-26 223714
Screenshot 2026-01-26 223945 Screenshot 2026-01-26 223952
Screenshot 2026-01-26 224200 Screenshot 2026-01-26 224206

Community

Before After
Screenshot 2026-01-26 223721 Screenshot 2026-01-26 223728
Screenshot 2026-01-26 223957 Screenshot 2026-01-26 224013
Screenshot 2026-01-26 224211 Screenshot 2026-01-26 224216

Latest Posts

Before After
Screenshot 2026-01-26 223739 Screenshot 2026-01-26 223747
Screenshot 2026-01-26 224020 Screenshot 2026-01-26 224026
Screenshot 2026-01-26 224220 Screenshot 2026-01-26 224226

Stay connect

Before After
Screenshot 2026-01-26 223756 Screenshot 2026-01-26 231119
Screenshot 2026-01-26 224035 Screenshot 2026-01-26 231100
Screenshot 2026-01-26 224231 Screenshot 2026-01-26 231108

Footer

Before After
Screenshot 2026-01-26 223819 Screenshot 2026-01-26 223822
Screenshot 2026-01-26 224044 Screenshot 2026-01-26 224050
Screenshot 2026-01-26 224239 Screenshot 2026-01-26 224244

@Prakash1185
Copy link
Author

Prakash1185 commented Feb 1, 2026

Hi @zhongjiajie, @SbloodyS
This PR fixes homepage layout alignment and responsiveness across screen sizes.
Please take a look into this PR. Thank you.

}
}
}
} No newline at end of file
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please leave an blank line at the end of each file.

Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR significantly improves the responsive design and layout of the homepage by introducing comprehensive media queries and CSS improvements across all homepage sections. The changes address multiple layout and alignment issues on mobile, tablet, and desktop screens.

Changes:

  • Added responsive breakpoints (1280px, 1024px, 768px, 640px, 480px) throughout homepage components with appropriate sizing and spacing adjustments
  • Converted fixed dimensions to flexible, responsive values (min-height, percentages, auto)
  • Changed images from hidden on mobile to responsive scaling for better content visibility
  • Enhanced button layouts with proper wrapping and full-width behavior on small screens

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 11 comments.

Show a summary per file
File Description
src/views/Home/why.scss Added responsive padding, flexible image sizing, improved title wrapping, and button spacing on mobile
src/views/Home/tasks.scss Changed to min-height, improved title alignment, fixed task item sizing, refined animations
src/views/Home/index.scss Enhanced hero section with responsive carousel, flexible text sizing, improved button layouts, and GitHub button responsiveness
src/views/Home/features.scss Added responsive feature card sizing with proper centering on smaller screens
src/views/Home/events.scss Converted to flexible layouts, responsive images, and improved card padding across breakpoints
src/views/Home/community.scss Made GitHub stats and community image responsive, improved layout stacking on mobile
src/views/Home/Main.jsx Added wrap prop to Space component and wrapped buttons div with responsive class
src/views/Home/Events.jsx Removed fixed image dimensions, added responsive sizing with width 100% and height auto
src/components/Footer/index.scss Changed to min-height, added responsive link layouts, improved visibility of contact info on mobile
src/components/Connect/index.scss Enhanced "Stay Connect" section with responsive text sizing and button adjustments

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

line-height: 1;
position: relative;
top: -30px;
top: 0;
Copy link

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The top: 0 property effectively resets the original -30px positioning. While this improves alignment on larger screens, verify that the visual positioning of the task count number relative to surrounding text is acceptable across all breakpoints. The original negative top value was likely intentional for visual alignment.

Copilot uses AI. Check for mistakes.
Comment on lines +141 to +145
animation: 30s linear infinite slidein;
}

&-left {
animation: 30s linear 0s infinite running slideout;
animation: 30s linear infinite slideout;
Copy link

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The animation timing has been changed from 30s linear 0s infinite running slidein to 30s linear infinite slidein. While both are functionally equivalent (the 0s delay and running state are defaults), ensure this simplified syntax is consistent with project conventions and doesn't introduce any unexpected behavior.

Copilot uses AI. Check for mistakes.
margin-top: 42px;
}
.github-button {
padding: 0 20px;
Copy link

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The content-width mixin already applies padding: 0 2vw for screens under 1280px. Adding padding: 0 20px here will override that padding, resulting in fixed 20px padding instead of the responsive 2vw padding. On a 1280px screen, 2vw equals 25.6px, which is close to 20px. However, on smaller screens like 640px, 2vw equals 12.8px, but this code forces 20px, which may be too much padding on mobile devices. Consider using the mixin's existing responsive padding or adjusting it conditionally with media queries.

Suggested change
padding: 0 20px;
@media screen and (min-width: 1281px) {
padding: 0 20px;
}

Copilot uses AI. Check for mistakes.
Comment on lines 245 to 246
padding: 0 20px;
box-sizing: border-box;
Copy link

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The content-width mixin already applies padding: 0 2vw for screens under 1280px. Adding padding: 0 20px here will override that padding, resulting in fixed 20px padding instead of the responsive 2vw padding. On smaller screens like 640px, 2vw equals 12.8px, but this code forces 20px, which may be excessive. Consider using the mixin's existing responsive padding or adjusting it conditionally with media queries.

Copilot uses AI. Check for mistakes.
height: auto;
display: flex;
justify-content: space-between;
justify-content: center;
Copy link

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The footer links are centered with justify-content: center on all screen sizes, but the original design likely had them spread across the footer width with justify-content: space-between. This changes the visual layout significantly. If centering is intentional for better mobile responsiveness, consider keeping space-between on larger screens and only switching to center on smaller screens where wrapping occurs.

Copilot uses AI. Check for mistakes.
Comment on lines +7 to +9
padding: 0 20px;
box-sizing: border-box;

Copy link

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The content-width mixin already applies padding: 0 2vw for screens under 1280px. Adding padding: 0 20px here will override that padding, resulting in fixed 20px padding instead of the responsive 2vw padding. On smaller screens like 640px, 2vw equals 12.8px, but this code forces 20px, which may be excessive. Consider using the mixin's existing responsive padding or adjusting it conditionally with media queries.

Suggested change
padding: 0 20px;
box-sizing: border-box;
box-sizing: border-box;
@media screen and (min-width: 1280px) {
padding: 0 20px;
}

Copilot uses AI. Check for mistakes.
margin-top: -100px;
position: relative;
z-index: 3;
padding: 0 20px;
Copy link

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The content-width mixin already applies padding: 0 2vw for screens under 1280px. Adding padding: 0 20px here will override that padding, resulting in fixed 20px padding instead of the responsive 2vw padding. On smaller screens like 640px, 2vw equals 12.8px, but this code forces 20px, which may be excessive. Consider using the mixin's existing responsive padding or adjusting it conditionally with media queries.

Suggested change
padding: 0 20px;

Copilot uses AI. Check for mistakes.
Comment on lines 83 to 84


Copy link

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a trailing blank line in this CSS block. While not functionally problematic, it's inconsistent with the rest of the codebase's formatting. Consider removing the blank line for consistency.

Suggested change

Copilot uses AI. Check for mistakes.
Comment on lines +173 to +175
position: absolute;
bottom: 46px;
right: 46px;
Copy link

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The button positioning changes from absolute to static based on screen size, which is good for responsive design. However, ensure that on screens >= 1025px the absolute positioning doesn't cause the button to overlap with content when the card content is shorter than expected. Consider testing with varying content lengths.

Suggested change
position: absolute;
bottom: 46px;
right: 46px;
position: static;
margin-top: 24px;

Copilot uses AI. Check for mistakes.
Comment on lines +149 to +161
.ant-image {
max-width: 50%;

@media screen and (max-width: 1024px) {
max-width: 100%;
width: 100%;
}

img {
width: 100%;
height: auto;
}
}
Copy link

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The change from hiding the image (display: none) to showing it responsively (max-width: 100%) is an improvement for smaller screens. However, verify that this doesn't cause performance issues on mobile devices, especially if the images are large. Consider implementing lazy loading or using responsive image sources (srcset) if the images are particularly large.

Copilot uses AI. Check for mistakes.
@Prakash1185
Copy link
Author

Thanks for the review, @SbloodyS.
I’ve fixed the formatting issues and adjusted the layout to behave correctly across different screen sizes.
Please let me know if the layout looks correct.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants